<template>
	<div class="material-form">
		<el-form ref="form" :model="form" class="material clearfix">
			<!-- 	<el-form-item class="material-item fl" align="center">
				<h3>标注</h3>
				<el-radio-group v-model="form.arrange" class="arrange" >
				    <el-radio label="1">已安排</el-radio><br>
				    <el-radio label="2">等待安排</el-radio>
				</el-radio-group> 
			</el-form-item> -->
			<el-form-item class="material-item fl" align="center">
				<h3>姓名</h3>
				<el-form-item class="arrange name">
					<el-input v-model="form.name" style="border: none;" clearable placeholder="请输入"></el-input>
				</el-form-item>
			</el-form-item>
			<el-form-item class="material-item fl" align="center">
				<h3>手机号</h3>
				<el-form-item class="arrange name" style="width: 180px;">
					<el-input v-model="form.telnum" style="border: none;" clearable placeholder="请输入"></el-input>
				</el-form-item>
			</el-form-item>
			<el-form-item class="material-item fl" align="center">
				<h3>性别</h3>
				<el-form-item class="arrange name">
					<el-select v-model="form.sex" placeholder="请选择" clearable>
						<el-option label="男" value="男"></el-option>
						<el-option label="女" value="女"></el-option>
					</el-select>
				</el-form-item>
			</el-form-item>
			<el-form-item class="material-item fl" align="center">
				<h3>年龄</h3>
				<el-form-item class="arrange name">
				    <el-input v-model="form.age" style="border: none;" clearable placeholder="请输入"></el-input>
				</el-form-item>
			</el-form-item>
			<!-- <el-form-item class="material-item fl" align="center">
				<h3>学历</h3>
				<el-form-item class="arrange name" style="width: 160px;">
				    <el-select v-model="form.education" placeholder="请选择" clearable>
				    	<el-option v-for="(item,index) in educationList" :label="item" :value="item" :key="index"></el-option>
				    </el-select>
				</el-form-item>
			</el-form-item> -->
			<el-form-item class="material-item fl" align="center">
				<h3>居住地</h3>
				<el-form-item class="arrange name">
				    <el-input v-model="form.region" style="border: none;" clearable placeholder="请输入"></el-input>
				</el-form-item>
			</el-form-item>
			<el-form-item class="material-item fl" align="center">
				<h3>身份证号码</h3>
				<el-form-item class="arrange name">
				    <el-input v-model="form.cardNum" style="border: none;" clearable placeholder="请输入"></el-input>
				</el-form-item>
			</el-form-item>
			<el-form-item class="material-item fl" align="center">
				<h3>职能</h3>
				<el-form-item class="arrange name">
				    <!-- <el-input v-model="form.tradeName" style="border: none;" clearable placeholder="请输入"></el-input> -->
					
					<el-cascader  ref="cascader" v-model="form.tradeCode" :options="workersList" clearable @change="handleChangeCode"></el-cascader>
					
				</el-form-item>
			</el-form-item>
			<el-form-item class="material-item fl" align="center">
				<h3>职位名称</h3>
				<el-form-item class="arrange name">
				    <el-input v-model="form.jobName" style="border: none;" clearable placeholder="请输入"></el-input>
				</el-form-item>
			</el-form-item>
			<el-form-item class="material-item fl" align="center">
				<h3>原工作城市</h3>
				<el-form-item class="arrange name">
				    <el-input v-model="form.originalCity" style="border: none;" clearable placeholder="请输入"></el-input>
				</el-form-item>
			</el-form-item>
			<el-form-item class="material-item fl" align="center">
				<h3>原工作单位</h3>
				<el-form-item class="arrange name">
				    <el-input v-model="form.originalCompany" style="border: none;" clearable placeholder="请输入"></el-input>
				</el-form-item>
			</el-form-item>
			<el-form-item class="material-item fl" align="center">
				<h3>原年薪</h3>
				<el-form-item class="arrange name">
				    <el-input v-model="form.annualSalary" style="border: none;" clearable placeholder="请输入"></el-input>
				</el-form-item>
			</el-form-item>
			<el-form-item class="material-item fl" align="center">
				<h3>期望薪资</h3>
				<el-form-item class="arrange name">
				    <el-input v-model="form.salaryExpectation" style="border: none;" clearable placeholder="请输入"></el-input>
				</el-form-item>
			</el-form-item>
			<!-- <el-form-item class="material-item fl" align="center">
				<h3>现住址</h3>
				<el-form-item class="arrange name" style="width: 220px;">
					<city-Cascader :citys="citys" :level="level" @handleChange="handleCityChange"></city-Cascader>
				</el-form-item>
			</el-form-item> -->
			<!-- <el-form-item class="material-item fl" align="center">
				<h3>期望职位</h3>
				<el-form-item class="arrange name">
				    <el-input v-model="form.position" style="border: none;" clearable placeholder="请输入"></el-input>
				</el-form-item>
			</el-form-item> -->
			<!-- 		<el-form-item class="material-item fl" align="center">
				<h3>工作状态</h3>
				<el-form-item class="arrange name" style="width: 180px;">
				    <el-select v-model="form.workStatus" placeholder="请选择" clearable>
				    	<el-option label="求职" value="求职"></el-option>
				    	<el-option label="在职" value="在职"></el-option>
				    	<el-option label="无求职意向" value="无求职意向"></el-option>
				    </el-select>
				</el-form-item>
			</el-form-item> -->
			<el-form-item class="material-item fl guishu" align="center">
				<h3>项目归属</h3>
				<span class="detl" @click="getRemark" v-show="projectId!=''">详情</span>
				<el-form-item class="arrange name" style="width: 220px;">

					<el-select v-model="form.projectId" placeholder="请选择项目归属" ref="selRef" @change="getChage" filterable
						clearable>
						<el-option v-for="(item,index) in projectList" :key="index" :label="item.projectBlongs"
							:value="item.projectId"></el-option>
					</el-select>
				</el-form-item>
			</el-form-item>


			<el-form-item class="material-item fl" align="center">
				<h3>招聘渠道</h3>
				<el-form-item class="arrange name" style="width: 220px;">
					<el-select v-model="form.recruitmentChannel" placeholder="请选择招聘渠道" ref="selRef" clearable>
						<el-option v-for="(item,index) in pecruitmentChannel" :key="index" :label="item" :value="item">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form-item>

			<el-form-item class="material-item fl" align="center">
				<h3>简历</h3>
				<el-form-item class="arrange name">
					<span style="color: #40AAFF;
    cursor: pointer;" @click="openUpload">上传简历</span>
				</el-form-item>
			</el-form-item>

			<el-form-item class="material-item fl" align="center">
				<h3>新增备注</h3>
				<el-form-item class="arrange name">
					<el-input v-model="remarks" @blur="addRemarks" @keydown.enter.native="addRemarks"
						style="border: none;" clearable placeholder="请输入"></el-input>
				</el-form-item>
			</el-form-item>


			<el-form-item class="material-item fl" align="center">
				<h3>状态</h3>
				<el-form-item class="arrange name remark">
					<el-select v-model="form.workStatus" placeholder="请选择状态" clearable>
						<el-option label="沟通" value="1"></el-option>
						<el-option label="通知面试" value="2"></el-option>
						<el-option label="实到面试" value="3"></el-option>
						<el-option label="通知复试" value="4"></el-option>
						<el-option label="实到复试" value="5"></el-option>
						<el-option label="录取" value="6"></el-option>
						<el-option label="到岗" value="7"></el-option>
					</el-select>
				</el-form-item>
			</el-form-item>
			<el-form-item class="material-item fl" align="center">
				<h3>跳槽意向程度</h3>
				<el-form-item class="arrange name">
				    <el-input v-model="form.hoppingIntention" style="border: none;" clearable placeholder="请输入跳槽意向程度"></el-input>
				</el-form-item>
			</el-form-item>
			<el-form-item class="material-item fl" align="center">
				<h3>面试时间</h3>
				<el-form-item class="arrange name" style="width: 160px;">
					<el-date-picker v-model="form.interviewTime" type="datetime" value-format="yyyy-MM-dd HH:mm"
						placeholder="选择日期"></el-date-picker>
				</el-form-item>
			</el-form-item>
			<!-- <el-form-item class="material-item fl" align="center">
				<h3>历史备注1</h3>
				<el-form-item class="arrange name remark">
				    <span>{{remark2|intercept}}</span>
				</el-form-item>
			</el-form-item>
			<el-form-item class="material-item fl" align="center">
				<h3>历史备注2</h3>
				<el-form-item class="arrange name remark">
				    <span>{{remark3|intercept}}</span>
				</el-form-item>
			</el-form-item> -->
			<el-form-item class="material-item fl" align="center">
				<h3>操作</h3>
				<el-form-item class="arrange name">
					<button v-preventClick class="subBtn" @click="submitData">确定录入</button>
				</el-form-item>
			</el-form-item>
		</el-form>
		<matMgUploadResume :options="uploadData" @updateView="updateView" @updateViews="updateViews">
		</matMgUploadResume>
		<perMgAddRemarks ref="remark" :options="remarksData"></perMgAddRemarks>
	</div>
</template>

<script>
	import cityCascader from "@/component/cityCascader/index.vue";
	import cityData from "@/assets/citys.json";
	export default {
		components: {
			cityCascader,
			matMgUploadResume: () => import("../pageComponents/matMgUploadResume.vue"),
			perMgAddRemarks: () => import("../pageComponents/perMgAddRemarks.vue"),
		},
		props: {
			options: {
				require: true,
				type: Object
			}
		},
		data() {
			return {
				pecruitmentChannel: [],
				form: {
					interviewTime: '',
					projectId: '',
					pecruitmentChannel: '',
					arrange: '2', //标注
					name: '', //姓名
					telnum: '', //手机号
					sex: '', //性别
					age: '', //年龄
					presentAddress: '', //现住址
					hiredate: '', //入职时间
					workStatus: '', //工作状态
					projectBelongs: '', //项目归属
					slist: [], //
					pdfUrl: '', //图片地址
					pdfName: '' ,//图片名字
					region:'',
					tradeCode:'',
					cardNum:'',
					tradeName:'',
					jobName:'',
					salaryExpectation:'',
					originalCompany:'',
					originalCity:'',
					annualSalary:'',
					hoppingIntention:'',
					
				},
				uploadData: {
					showDialog: false, //显示弹窗
					title: '上传简历', //标题
					fileList: [], //上传简历列表
				},
				remarksData: {
					showDialog: false, //显示弹窗
					title: '查看备注', //标题
				},
				citys: [], //省市区集合
				level: '0', //
				remarks: '', //新增备注
				remark1: '_', //最新备注
				remark2: '_', //历史备注1
				remark3: '_', //历史备注2
				projectList: [], //项目列表
				projectId: '',
				workersList:[],
				projectRemark: '',
				educationList: ["不限", "初中及以下", "高中", "中技", "中专", "大专", "本科", "硕士", "MBA", "博士", "其他"],
			}
		},
		created() {
			this.getProjectList();
			// this.getProjectBelong();
			let workers = require('@/assets/mask/positionList.json');
			this.workersList = workers.position; //职能类型
		},
		methods: {
			handleChangeCode(data){
			console.log(data);	
			  console.log(this.$refs["cascader"].getCheckedNodes()[0].label)
			  this.form.tradeName=this.$refs["cascader"].getCheckedNodes()[0].label
			},
			getRemark(row) {
				this.remarksData.showDialog = true;
				this.remarksData.textarea = this.projectRemark;

			},

			getChage(item) {
				console.log(item);
				this.projectId = item
				this.projectList.forEach(data => {
					if (data.projectId == item) {
						console.log(data, item);
						this.form.projectBelongs = data.projectBlongs
					}
				})
				let params = {
					projectId: item
				}
				this.$telAxios.get('/v1/librarian/pecruitmentChannelByProjectId?projectId=' + item, params).then(res => {
					console.log(res);
					this.pecruitmentChannel = res.data.data
				})

				this.$telAxios.get('/v1/librarian/selectProjectInfo?projectId=' + item, params).then(res => {
					this.projectRemark = res.data.data.projectRemark
				})


			},
			updateViews(data) {
				this.form.pdfUrl = data
			},
			updateView(msg, url) {
				this.uploadData.showDialog = false;
				let params = {
					librarianId: this.uploadData.userInfo.librarianId,
					changedFront: '上传一条简历',
					changedQueen: '上传的简历名为：' + msg,
					grade: '8'
				}
				this.$telAxios.post('/v1/librarian/insertDetail', params).then(res => {
					console.log(res);
					if (res.data.code === 1000) {

					} else {
						this.$message({
							message: res.data.message,
							type: 'warning'
						})
					}
				})
				// this.searchData(this.search.data);
				console.log(msg);
				this.form.pdfName = msg
				this.updateViews()
			},
			openUpload(data) {
				console.log(data);
				this.uploadData.showDialog = true;
				this.uploadData.userInfo = data;
				this.uploadData.fileList = [];
			},
			getProjectBelong() {
				let data = {
					pageNum: '1',
					pageSize: '10',
				}
				this.$telAxios.post('v1/librarian/selectProjectByList', data).then(res => {
					this.projectList = res.data.data.plist
				})
			},
			//获取所有的项目列表
			getProjectList() {
				this.$telAxios.get('/v1/librarian/projectBelongsList?status=1', {}).then(res => {
					console.log(res);
					this.projectList = res.data.data;
				})
			},
			//提交数据
			submitData() {

				if (!this.form.name && !this.form.telnum) {
					this.$message({
						message: '请输入姓名和手机号!',
						type: 'warning'
					})
					return false
				}

				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.telnum))) {
					this.$message.error("手机号码有误，请重填");
					return false;
				}

				if (!this.form.recruitmentChannel) {
					this.$message({
						message: '请选择招聘渠道!',
						type: 'warning'
					})
					return false
				}

				if (!this.form.workStatus) {
					this.$message({
						message: '请选择工作状态!',
						type: 'warning'
					})
					return false
				}

				if (!this.form.projectBelongs) {
					this.$message({
						message: '请选择项目归属!',
						type: 'warning'
					})
					return false
				}





				this.$emit('addMaterial', this.form);
			},
			//添加备注
			addRemarks() {
				if (this.remarks) {
					this.form.slist.unshift(this.remarks);
					this.remarks = '';
				}
			},
			//清除数据
			clearData() {
				this.form = {
					arrange: '2', //标注
					name: '', //姓名
					telnum: '', //手机号
					sex: '', //性别
					age: '', //年龄
					presentAddress: '', //现住址
					date: '', //入职时间
					workStatus: '', //工作状态
					projectBelongs: '', //项目归属
					slist: [], //
				}
				this.form.slist.splice(0);
				this.citys = [];
				this.remarks = '';
				this.remark1 = '_';
				this.remark2 = '_';
				this.remark3 = '_';
			},
			//选择城市
			handleCityChange(val) {
				this.citys = val;
				this.form.region=val
				this.cityConvert(val);
			},
			//城市转换,将城市编号转换为城市名
			cityConvert(val) {
				let citys = cityData.city;
				let str = val[0] + '';
				if (str == 'NaN') {
					this.form.presentAddress = '';
					return false
				};
				citys.forEach(item => {
					if (item.code === val[0]) {
						this.form.presentAddress = item.name;
						item.subLevelModelList.forEach(item1 => {
							if (item1.code === val[1]) {
								this.form.presentAddress = this.form.presentAddress + '-' + item1.name;
								item1.subLevelModelList.forEach(item2 => {
									if (item2.code === val[2]) {
										this.form.region = this.form.presentAddress + '-' +
											item2.name;
									}
								})
							}
						})
					}
				})
			},
		},
		watch: {
			'form.slist'() {
				if (this.form.slist.length == 1) {
					this.remark1 = this.form.slist[0];
					this.remark2 = '_';
					this.remark3 = '_';
				} else if (this.form.slist.length == 2) {
					this.remark1 = this.form.slist[0];
					this.remark2 = this.form.slist[1];
					this.remark3 = '_';
				} else if (this.form.slist.length >= 3) {
					this.remark1 = this.form.slist[0];
					this.remark2 = this.form.slist[1];
					this.remark3 = this.form.slist[2];
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.material-form {
		width: 100%;
		text-align: start;
		min-width: 1440px;
	}

	.material {
		display: inline-block;
	}

	.detl {
		position: absolute;
		top: 71px;
		left: 10px;
		/* bottom: 40px; */
		z-index: 99;
		cursor: pointer;
		color: rgb(64, 170, 255);

	}

	.guishu /deep/ .el-input__inner {
		text-align: center;
		margin-left: 10px;
	}

	.material-item h3 {
		background-color: #5492CC;
		color: #fff;
		height: 50px;
		line-height: 50px;
		padding: 0 20px;
	}

	.arrange {
		padding: 0 15px;
		text-align: left;
		border: 1px solid #D1D1D1;
		height: 80px;
	}

	.subBtn {
		cursor: pointer;
		color: rgb(84, 146, 204);
		background-color: transparent;
		border: none;
	}

	/deep/.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 136px;
	}

	.material-item .name {
		width: 140px;
		padding-top: 20px;
		text-align: center;
	}

	.material-item .remark {
		padding: 10px 0;
	}

	.remark /deep/.el-form-item__content {
		line-height: 58px;
	}

	/deep/.el-input__inner {
		text-align: center;
	}
</style>
